import React, { memo, useEffect } from 'react'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'

import ThemeHeaderRcm from 'components/theme-header-rcm'
import TopList from 'components/top-ranking'
import { RankingWrapper } from './style'
import { getTopListAction } from '../../store/actionCreator'

function RecommendRanking(){

  const dispatch = useDispatch()
  const { upRanking={},newRanking={},originRanking={}}=useSelector(
    state=>({
      upRanking: state.getIn(['recommend', 'upRanking']),
      originRanking: state.getIn(['recommend', 'originRanking']),
      newRanking: state.getIn(['recommend', 'newRanking'])
    }),
    shallowEqual
  )

  // other hook
  useEffect(() => { 
    dispatch(getTopListAction(19723756))
    // dispatch(getTopListAction(3779629))
    // dispatch(getTopListAction(2884035))
  }, [dispatch])

  return(
    <RankingWrapper>
      <ThemeHeaderRcm title="榜单" />
      <div className="ranking-info">
        <TopList info={upRanking} />
        <TopList info={originRanking} />
        <TopList info={newRanking} />
      </div>
    </RankingWrapper>
  )
}

export default memo(RecommendRanking)